<template>
    <div id="orderData">
        <orderTittle>
            <template #tittle="">订单数据</template>
        </orderTittle>
        <el-row>
            <el-col :span="6" class="rightBorder">
                <table class="tableCss">
                    <tr>
                        <td>今日订单总额：</td>
                        <td>1111111</td>
                    </tr>
                    <tr>
                        <td>本周订单总额：</td>
                        <td>1111111</td>
                    </tr>
                    <tr>
                        <td>本月订单总额：</td>
                        <td>1111111</td>
                    </tr>
                    <tr>
                        <td>历史订单总额：</td>
                        <td>1111111</td>
                    </tr>
                </table>
            </el-col>
            <el-col :span="6" class="rightBorder">
                <table class="tableCss">
                    <tr>
                        <td>今日新订单总数：</td>
                        <td>1111111</td>
                    </tr>
                    <tr>
                        <td>本周新订单总数：</td>
                        <td>1111111</td>
                    </tr>
                    <tr>
                        <td>本月新订单总数：</td>
                        <td>1111111</td>
                    </tr>
                    <tr>
                        <td>历史订单总数：</td>
                        <td>1111111</td>
                    </tr>
                </table>
            </el-col>
            <el-col :span="6" class="rightBorder">
                <table class="tableCss">
                    <tr>
                        <td>今日有效订单总数：</td>
                        <td>1111111</td>
                    </tr>
                    <tr>
                        <td>本周有效订单总数：</td>
                        <td>1111111</td>
                    </tr>
                    <tr>
                        <td>本月有效订单总数：</td>
                        <td>1111111</td>
                    </tr>
                    <tr>
                        <td>历史有效订单总数：</td>
                        <td>1111111</td>
                    </tr>
                </table>
            </el-col>
            <el-col :span="6">
                <table class="tableCss">
                    <tr>
                        <td>今日退货订单总数：</td>
                        <td>1111111</td>
                    </tr>
                    <tr>
                        <td>本周退货订单总数：</td>
                        <td>1111111</td>
                    </tr>
                    <tr>
                        <td>本月退货订单总数：</td>
                        <td>1111111</td>
                    </tr>
                    <tr>
                        <td>历史退货订单总数：</td>
                        <td>1111111</td>
                    </tr>
                </table>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import orderTittle from "./orderTittle";
    export default {
        name: "orderData",
        components:{
            orderTittle,
        }
    }
</script>

<style scoped lang="less">
    #orderData{
        padding: 10px 15px 20px;
        background-color: #ffffff;
        .rightBorder{
            border-right: 1px solid gray;
        }
        .tableCss{
            width: 100%;
            tr td:nth-of-type(1){
                width: 60%;
                font-size: 13px;
                line-height: 20px;
                text-align: right;
                padding-right: 10px;
            }
            tr td:nth-of-type(2){
                width: 40%;
                color: #ff9900;
                font-size: 13px;
                line-height: 20px;
                text-align: left;
                padding-left: 10px;
            }
        }
    }

</style>